<template>
  <div class="toolbar colorMain">
    <el-header class="mt-10 mb-10">
      <el-form :inline="true" size="small">
        <el-form-item label="时间" >
          <el-date-picker
            v-model="pickTime1"
            :picker-options="pickerOptions"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            size="small"
            value-format="yyyy-MM-dd"/>
        </el-form-item>
        <el-form-item label="" >
          <el-button type="primary" size="small" @click="send">提交</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table :data="tableData" size="small" stripe border fit highlight-current-row>
        <template v-for="(item, index) in key_mapper">
          <el-table-column v-if="item.is_percentage" :key = "index" :prop="item.key" :label="item.name" :min-width="130" :formatter="formatter" sortable>
            <template slot-scope="scope">{{ `${scope.row[item.key]}%` }}</template>
          </el-table-column>
          <el-table-column v-else :key = "index" :prop="item.key" :label="item.name" :min-width="130" :formatter="formatter" sortable/>
        </template>
      </el-table>
      <el-row :gutter="24" class="m-10" >
        <el-col :span="12" class="block">
          <div class="m-5">投注分布</div>
          <ve-pie :data="betAmount"/>
        </el-col>
        <el-col :span="12" class="block">
          <div >投注商品次数分步</div>
          <ve-pie :data="betRegion"/>
        </el-col>
        <el-col :span="12" class="block">
          <div >投注商品金额分布</div>
          <ve-pie :data="betRegionCount"/>
        </el-col>
        <el-col :span="12" class="block">
          <div >开奖结果分布</div>
          <ve-pie :data="winRegion"/>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script>
import { gameReport } from '@/api/table'
import { pickerOptions, pickTime } from '@/model/DateRange'
import { fixed3 } from '@/utils'
export default {
  data() {
    return {
      data: {},
      tableData: [],
      key_mapper: [],
      pickTime1: pickTime,
      page: 1,
      size: 20,
      total: 0,
      sendData: {},
      fromType: this.$route.meta.from,
      columns: ['key', 'value'],
      winRegion: {},
      betRegion: {},
      betAmount: {},
      betRegionCount: {},
      pickerOptions: pickerOptions
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData(data = {
      time_range: JSON.stringify([`${this.pickTime1[0]} 00:00:00`, `${this.pickTime1[1]} 23:59:59`] || []),
      game_type: 'game',
      game_id: this.fromType
    }) {
      this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.15)' })
      gameReport(data).then(res => {
        this.sendData = JSON.parse(JSON.stringify(data))
        this.data = res.data
        this.tableData = res.data.list.map(item => {
          const data = {}
          for (const item1 in item) {
            data[item1] = item[item1].sum || item[item1]
          }
          return data
        })
        this.key_mapper = res.data.key_mapper
        this.total = res.data.total_count
        this.pie()
      })
    },
    pie() {
      const data = {
        winRegion: 'term_detail_win_region_index',
        betRegion: 'term_detail_bet_region_index',
        betAmount: 'term_detail_bet_amount_slot_index',
        betRegionCount: 'term_detail_bet_region_count_index'
      }
      for (const key in data) {
        const rows = []
        this.data.list.forEach(item => {
          item[data[key]].forEach((item2, index2) => {
            if (!rows[index2]) {
              rows[index2] = item2
            } else {
              rows[index2].value = rows[index2].value + item2.value
            }
          })
        })
        this[key] = { rows, columns: this.columns }
      }
    },
    send() {
      this.getData()
    },
    formatter(row, column, item) {
      return fixed3(item)
    }
  }
}
</script>

<style scoped>
  .lineHeight {
    line-height: 35px;
  }
</style>
